<template>
  <div class="index">
    <el-row :gutter="30">
      <el-col class="index-head" :span="24">
        <el-col :lg="18" :xl="20">
            <div class="index-head-left">车辆加油加气</div>
            <div class="quick-entrance">
                <ul>
                    <li class="quick-entrance-item">快捷入口：</li>
                    <li class="quick-entrance-item">
                      <router-link to="/weihuweixiu">维修</router-link>
                    </li>
                    <li class="quick-entrance-item">
                      <router-link to="/gongzifafang">工资</router-link>
                    </li>
                    <li class="quick-entrance-item">
                      <router-link to="/feiyongbaoxiao">报销</router-link>
                    </li>
                    <li class="quick-entrance-item">
                      <router-link to="/cheliangjieche">检车</router-link>
                    </li>
                    <li class="quick-entrance-item">
                      <router-link to="/cheliangbaoxian">保险</router-link>
                    </li>
                    <!--<li class="quick-entrance-item">
                      <router-link to="/xueyuantuifei">退费</router-link>
                    </li>-->
                </ul>
            </div>
        </el-col>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :lg="18" :xl="20" class="my-artcle">
        <!-- car select -->
        <carSelect @onSelect="selectCarInfor"></carSelect>
        <div class="pay-method">
          <el-col :span="12">
            <div class="auto-center">
              <el-form labelPosition="right" label-width="126px" :model="formLabelAlign" :rules="rules" ref="form" class="quane-pay">
                <el-form-item label="总金额：" prop="fuelCost">
                  <el-input class="pay-method-ipt total padding-right" :maxlength="5" v-model="formLabelAlign.fuelCost"></el-input>
                </el-form-item>
                <el-form-item label="燃料类型：" prop="fuelType">
                  <el-radio-group v-model="formLabelAlign.fuelType">
                    <el-radio label="1">加油</el-radio>
                    <el-radio label="2">加气</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="里程数：" prop="millage">
                  <el-input class="pay-method-ipt" v-model="formLabelAlign.millage"><template slot="append">km</template></el-input>
                </el-form-item>
                <el-form-item label="经办人：" prop="fuelPerson">
                  <people-input class="pay-method-ipt" v-model="formLabelAlign.fuelPerson" placeholder="请选择经办人"></people-input>
                </el-form-item>
                <el-form-item label="备注：" prop="remark">
                  <el-input type="textarea" class="pay-method-ipt" v-model="formLabelAlign.remark"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="12">
            <!-- upload -->
            <upLoad v-model="filesIds"></upLoad>
          </el-col>
          <el-col :span="24"><img class="submit-btnImg" src="../../static/img/submit-btn.jpg" @click="submit"></el-col>
        </div>
      </el-col>
      <el-col :lg="6" :xl="4">
        <div class="studnet-information">
          <p class="student-select-title">车辆信息</p>
          <img class="no-message" v-if="!carInfor.plateNumber" src="../../static/img/no-message.jpg" alt="暂无消息">
          <div v-else-if="carInfor.plateNumber">
            <div class="carID"><span class="carID-line">{{carInfor.plateNumber}}</span></div>
            <p class="line"></p>
            <ul>
              <li class="stuInfo-item">本月油气消费总额：￥{{carInfor.totleCost}}</li>
              <li class="stuInfo-item">本月加油气次数：{{carInfor.fuelNum}}</li>
              <li class="stuInfo-item">本月里程总计：0km</li>
              <li class="stuInfo-item">本月日均油气消费额：￥{{carInfor.averageDailyCost}}</li>
            </ul>
            <p class="fresh-date">数据更新日期：{{$moment().format("YYYY-MM-DD")}}</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import upLoad from "@/components/upload"
import carSelect from "@/components/car-select"
import peopleInput from "@/components/people-input"
export default {
  name: "expenditure",
  components: {carSelect,upLoad,peopleInput},
  data() {
    return {
      carInfor: {}, //存放右侧车辆信息
      formLabelAlign: {
        fuelType: "1",
        fuelCost: "",
        millage: "",
        fuelPerson: "",
        remark: "",
        filesId: "",
      },
      filesIds: [],
      rules: {
        fuelCost: [{ required: true, message: "请输入金额", trigger: "blur" }],
        millage: [{ required: true, message: "请输入里程数", trigger: "blur" }],
        fuelPerson: [
          { required: true, message: "请输入经办人", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 提交
    submit() {
      //判断是否存在车辆信息
      if (this.carInfor.plateNumber) {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.formLabelAlign.filesId = this.filesIds.join();
            this.formLabelAlign.carId = this.carInfor.carId;
            this.formLabelAlign.plateNumber = this.carInfor.plateNumber;
            this.$http.post("/iem/car/addCarFuel", this.formLabelAlign, d => {
              if (d.status == 1) {
                layer.msg(d.msg);
                this.resetForm();
              }
            });
          } else {
            return false;
          }
        });
      } else {
        layer.msg("请先查询车辆信息！", {
          shift: 6,
          shade: 0.3
        });
      }
    },
    // 重置表单
    resetForm() {
      this.$refs.form.resetFields();
      this.filesIds = [];
    },
    // 查询车辆
    selectCarInfor(car) {
      // console.log(JSON.parse(JSON.stringify(car)));
      if (car.carId) {
        this.$http.get("iem/car/getCarFuelCount/" + car.carId, d => {
          if (d.status == 1) {
            this.carInfor = $.extend({},d.data, car);
          } else {
            layer.msg(d.msg);
          }
        });
      } else {
        layer.msg("请先输入车牌号！", {
          shift: 6,
          shade: 0.3
        });
      }
    }
  }
};
</script>

<style scoped>
.student-select {
  position: relative;
}
.submit-chaxun {
  position: absolute;
  right: 0;
  bottom: 50px;
  right: 3%;
}
.input-with-select {
  width: 100%;
}
.carID {
  width: 70%;
  height: 30px;
  line-height: 30px;
  padding: 6px;
  margin: 70px auto;
  background: url("../../static/img/carID-bg.jpg") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.line {
  border-bottom: 1px solid #e9e9e9;
}
.carID-line {
  width: 100%;
  height: 30px;
  border: 1px dotted #fff;
  display: block;
  font-size: 18px;
}
.fresh-date {
  position: absolute;
  bottom: 40px;
  left: 8%;
  color: #b8b8b8;
}
.submit-btnImg {
  margin: 30px auto;
  display: block;
  cursor: pointer;
}
</style>

